<template>
	<uv-navbar
	  :fixed="false"
	  @leftClick="$onClickLeft"
	  bgColor="#09b4f1"
	>
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="bare">
			<!-- 顶部导航高度 -->
			<view class="statusBar"></view>
		</view>
		<view class="notice">
			<view class="belong flex">
				<view class="left">
					<view class="store">{{contactData.name}}</view>
				</view>
			</view>
			<view class="bottom flex" @click="onCustomer(contactData.customerId)">
				<view class="">归属客户：{{contactData.customerName}}</view>
				<view class="client_time flex">查看<uv-icon name="arrow-right" color="#09b4f1"  :size="20"></uv-icon></view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="region mt-3 bg-white">
			<view class="title">
				<text class="text">基本信息</text>
			</view>
			<view class="details">
				<uv-form  ref="uForm" labelWidth="80">
					<uv-form-item label="电话:" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.telephone" border="none" placeholder="暂无"  />
					</uv-form-item>
					<uv-form-item label="邮箱：" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.email" border="none"  placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="微信：" borderBottom >
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.wechat"  border="none"  placeholder="暂无"  />
					</uv-form-item>
					<uv-form-item label="职务：" borderBottom>
						<uv-input disabled  disabledColor="#ffffff" v-model="contactData.post" border="none"  placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="生日：" borderBottom>
						<uv-input disabled  disabledColor="#ffffff" v-model="contactData.birthday" border="none"  placeholder="暂无" />
					</uv-form-item>
					<uv-form-item label="决策人：" borderBottom >
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.decision" border="none"  placeholder="暂无"/>
					</uv-form-item>
					<uv-form-item label="地址:" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.detail_address" border="none"  placeholder="暂无"  />
					</uv-form-item>
					<uv-form-item label="下次跟进:" borderBottom>
						<uv-input disabled disabledColor="#ffffff" v-model="contactData.next_time" border="none"  placeholder="暂无"  />
					</uv-form-item>
				</uv-form>
			</view>
		</view>
	<!-- 底部按钮 -->
	<view class="bottom-btn" >
		<view class="btn entity" @click="onEdit">
			<text class="ml-1">修改</text>
		</view>
	</view>
	</view>
</template>

<script setup>
import {
	ref,
	unref,
	computed
} from 'vue'
import { onLoad,onShow ,onReady} from '@dcloudio/uni-app'
import {
  getContacts
} from '@/api/customer'
import { formatDateTime,prePage } from '@/utils/util'
const title = ref('联系人详情')
const id = ref(0)
const contactData = ref({})

//form: '',

onLoad((e) => {
	console.log('e:',e)
	id.value = e.id
	getData()
})


onShow(()=>{
	getData()
})

// 获取数据详情
const getData = async() => {
	contactData.value = await getContacts({id:id.value})
}

// 查看客户详情
const onCustomer = (id) => {
	uni.navigateTo({
		url: '/pages/components/pages/customer/customerDetails?id=' + id
	});
}
const onEdit = () => {
	uni.navigateTo({
		url: '/pages/components/pages/contacts/addPerson?id=' + id.value + '&type=edit'
	})
}


</script>

<style lang="scss" scoped>
.container {
	background-color: #f7f7f7 !important;
	min-height: 100vh;
}
.bare {
	color: #fff;
	background-color: #09b4f1; 
}
.notice {
	margin: -68px 8px 10px 8px;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 10px;
	padding: 25rpx 20rpx 35rpx;
	.belong {
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.right {
			color: #FF7159;
		}
	}
	.relation {
		justify-content: space-between;
		margin-top: 15rpx; 
		font-size: 26rpx;
		.dial {
			color: #2979ff;
			font-size: 14px;
			border-bottom: 1px solid #2979ff;
			padding-bottom: 0px;
		}
	}
	.bottom {
		margin-top: 25rpx;
		justify-content: space-between;
		.client_time {
			color: #777;
			font-size: 26rpx;
		}
	}
}
.region {
	.title {
		text-align: center;
		font-size: 35rpx;
		font-weight: 700;
		.text {
			color: #09b4f1;
			border-bottom: 6rpx solid #09b4f1;
		}
	}
	.details {
		padding: 45rpx 25rpx 160rpx;
		
	}
}
.statusBar {
	position: relative;
	z-index: -1;
	height: 188rpx;
}
.bottom-btn {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 25rpx 30rpx 45rpx;
	background-color: #fff;
	z-index: 100;
	.btn {
		float: right;
		line-height: 43rpx;
		padding: 15rpx 36rpx;
		border-radius: 5px;
		font-size: 28rpx;
		text-align: center;
	}
	.entity {
		color: #fff;
		background-color: #09b4f1; 
	}
}


</style>
